<template>
    <section style="background:#fafafa;min-height:100vh;padding-bottom:70px;">
        <div class="homehead">
            <img src="@/assets/headimg.png" class="homehead__back" style="z-index: 0;" />
        </div>
        <div class="hometitle">
            <p class="hometitle__name">你好，{{name}}</p>
            <p class="hometitle__p">他们在等待你的帮助…</p>
        </div>
        <div class="titlebox">
            <p>爱心救助</p>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="raiseslist">
                <div
                    class="raises__piece"
                    v-for="(item,index) in info"
                    :key="index"
                    @click="toDetail(item.prepare_id)"
                >
                    <div class="raises__piece__top">
                        <van-image
                            round
                            width="22"
                            height="22"
                            :src="item.headimgurl"
                            :show-error="true"
                            :error-icon="require('@/assets/err.jpg')"
                            class="img"
                        />
                        <p>
                            {{item.nickname}}
                            <i>发起救助</i>
                        </p>
                        <span>已获捐{{item.count}}次</span>
                    </div>
                    <div class="raises__piece__content">
                        <van-image
                            :src="'http://user-prepare.oss-cn-beijing.aliyuncs.com/' + item.prepare_pic_url.split(',')[0]"
                            :show-error="true"
                            :error-icon="require('@/assets/err.jpg')"
                            class="img"
                        />
                        <div class="raises__piece__content__text">
                            <h5>{{item.prepare_title}}</h5>
                            <div class="progress-box">
                                <van-progress
                                    pivot-text
                                    color="#ff5e10"
                                    :percentage="item.total_money/item.prepare_money"
                                />
                            </div>
                            <div class="moneybox">
                                <p class="money--achieve">
                                    已筹
                                    <span>{{item.total_money}}</span>元
                                </p>
                                <p class="money--target">
                                    目标
                                    <span>{{item.prepare_money}}</span>元
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
        <Bottom />
    </section>
</template>

<script>
import { Progress, List, Image  } from "vant";
import { getHomeList, customerInfo } from "@/api/api";
import Bottom from "@/components/bottom";
export default {
    components: {
        [Progress.name]: Progress,
        [List.name]: List,
        [Image.name]: Image,
        Bottom,
    },
    data() {
        return {
            name: "",
            info: [],
            page: 1,
            loading: false,
            finished: true
        };
    },
    created() {
        customerInfo().then(res => {
            this.name = res.results.nickname;
        });
        this.getData();
    },
    methods: {
        getData() {
            getHomeList({ pageNum: this.page }).then(res => {
                if (res.code) {
                    for (let i of res.results) {
                        this.info.push(i);
                    }
                    if (res.results.length > 0) {
                        this.finished = false;
                    } else {
                        this.finished = true;
                    }
                    this.loading = false;
                } else {
                    Toast(res);
                }
            });
        },
        onLoad() {
            this.page++;
            this.getData();
        },
        toDetail(id) {
            this.$router.push({
                path: "/Detail",
                query: { id: id }
            });
        }
    }
};
</script>

<style scoped>
.homehead {
    position: relative;
}
.homehead__back {
    width: 100%;
    top: 0;
    z-index: -1;
}
h4 {
    margin: 0;
    font-family: PingFangSC-Semibold;
    font-size: 24px;
    line-height: 36px;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    z-index: 1;
    position: relative;
}
.homehead p {
    margin-top: 8px;
    font-family: PingFangSC-Regular;
    font-size: 0.66666667rem;
    line-height: 0.94444444rem;
    color: #ffffff;
    text-align: center;
    z-index: 1;
    position: relative;
}
.hometitle {
    margin: -90px 6.4% 0;
    width: 87.2%;
    height: 90px;
    background: #ffffff;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 16px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}
.hometitle__name {
    font-family: PingFangSC-Semibold;
    font-size: 22px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.8);
    font-weight: bold;
}
.hometitle__p {
    margin-top: 4px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    line-height: 1.1;
    color: rgba(0, 0, 0, 0.56);
}
.titlebox {
    height: 70px;
    padding: 24px 24px 16px 24px;
    position: relative;
    box-sizing: border-box;
}
.titlebox p {
    font-family: PingFangSC-Semibold;
    font-weight: bold;
    font-size: 22px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.8);
}
.raiseslist {
    width: 100%;
    padding: 0 24px 0 24px;
    box-sizing: border-box;
}
.raiseslist .raises__piece {
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    padding: 24px 0;
}
.raises__piece__top {
    position: relative;
    height: 22px;
}
.raises__piece__top .img {
    position: absolute;
    left: 0;
    top: -5px;
    border-radius: 50%;
}
.raiseslist .raises__piece__top p {
    font-size: 12px;
    line-height: 1.1;
    text-indent: 30px;
    color: rgba(0, 0, 0, 0.8);
    font-weight: bold;
}
.raises__piece__top p i {
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.32);
    line-height: 1.1;
    font-style: normal;
}
.raises__piece__top span {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.32);
    text-align: right;
    line-height: 1.1;
}
.raises__piece__content {
    width: 100%;
    position: relative;
    margin-top: 16px;
}
.raiseslist .raises__piece__content .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    border-radius: 12px;
}
</style>